<template>
  <div class="box">
    <div class="left">

      <div class="left_groid">
         <div class="left_groid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
         <div class="groid">
               <Lefttop></Lefttop>
         </div>
      </div>

       <div class="left_groid">
         <div class="left_groid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
          <div class="groid">
               <ECharts4></ECharts4>
          </div>
       </div>
      
    </div>

    <div class="context">
           
      </div>

    <div class="right">

      <div class="right_proid">
          <div class="right_proid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
        <div class="proid">
             <Righttop></Righttop>
           
            <ECharts5></ECharts5>
        </div>
      </div>

      <div class="right_proid">
         <div class="right_proid_top" style="color: aliceblue; line-height: 33px;"><span style="margin-left: 10%;">水电用量</span></div>
        <div class="proid">
          <ECharts6></ECharts6>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ECharts3 from '@/components/ECharts3.vue';
import ECharts4 from '@/components/ECharts4.vue';
import ECharts5 from '@/components/ECharte5.vue';
import ECharts6 from '@/components/ECharts6.vue';
import Lefttop from '@/components/Jy/Lefttop.vue';
import Righttop from '@/components/Jy/Righttop.vue';


</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  //   background: blue;
  display: flex;
  .left {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Left.png") no-repeat;
    background-size: 100% 100%;
    .left_groid{
       width: 75%;
      height: 40%;
      // background: rgba(250, 247, 247, 0.2);
      margin-left: 40px;
      margin-top: 60px;
        .groid {
       width: 100%;
      height: 80%;
      background: rgba(250, 247, 247, 0.2);
      margin-top: 10px;
    }
    }
  
  }
  .left_groid_top{
        background: url("../../public/images/左.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
.right_proid_top{
    background: url("../../public/images/右.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  .context {
    flex: 1;
    height: 70%;
    // width: 90%;
    margin-top: 5%;
    // border: solid 1px #ccc;
  }
  .context_hezi{
     width: 94%;
     height: 100%;
     margin-left: 3%;
  }
  .right {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Right.png") no-repeat;
    background-size: 100% 100%;
     .right_proid{
         width: 75%;
      height: 40%;
      // background: rgba(250, 247, 247, 0.2);
      margin-left: 70px;
      margin-top: 60px;
       .proid {
      width: 100%;
      height: 80%;
      background: rgba(250, 247, 247, 0.2);
      margin-top: 10px;
     
    }
    }
  }
}
</style>